<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.TYPOGRAPHY.DESCRIPTION' | translate}}
      </p>
      <ul class="free-ul-padding">
        <li>{{'DEMO.TYPOGRAPHY.TITLE' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.DEL' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.S' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.INS' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.U' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.SMALL' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.STRONG' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.EM' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.ALIGN.NAME' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.LOWER' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.ABBR' | translate}}</li>
        <li>{{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}</li>
      </ul>
      <hr>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.TITLE' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <h1>h1.  heading</h1>
            <h2>h2.  heading</h2>
            <h3>h3.  heading</h3>
            <h4>h4.  heading</h4>
            <h5>h5.  heading</h5>
            <h6>h6.  heading</h6>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;h1&gt;h1.  heading&lt;/h1&gt;
              &lt;h2&gt;h2.  heading&lt;/h2&gt;
              &lt;h3&gt;h3.  heading&lt;/h3&gt;
              &lt;h4&gt;h4.  heading&lt;/h4&gt;
              &lt;h5&gt;h5.  heading&lt;/h5&gt;
              &lt;h6&gt;h6.  heading&lt;/h6&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.DEL' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <del>{{'DEMO.TYPOGRAPHY.DEL' | translate}}</del>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;del&gt;{{'DEMO.TYPOGRAPHY.DEL' | translate}}&lt;/del&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.S' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <s>{{'DEMO.TYPOGRAPHY.S' | translate}}</s>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;s&gt;{{'DEMO.TYPOGRAPHY.S' | translate}}&lt;/s&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.INS' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <ins>{{'DEMO.TYPOGRAPHY.INS' | translate}}</ins>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;ins&gt;{{'DEMO.TYPOGRAPHY.INS' | translate}}&lt;/ins&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.U' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <u>{{'DEMO.TYPOGRAPHY.U' | translate}}</u>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;u&gt;{{'DEMO.TYPOGRAPHY.U' | translate}}&lt;/u&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.SMALL' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <small>{{'DEMO.TYPOGRAPHY.SMALL' | translate}}</small>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;small&gt;{{'DEMO.TYPOGRAPHY.SMALL' | translate}}&lt;/small&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.STRONG' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <strong>{{'DEMO.TYPOGRAPHY.STRONG' | translate}}</strong>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;strong&gt;{{'DEMO.TYPOGRAPHY.STRONG' | translate}}&lt;/small&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.EM' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <em>{{'DEMO.TYPOGRAPHY.EM' | translate}}</em>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;em&gt;{{'DEMO.TYPOGRAPHY.EM' | translate}}&lt;/small&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.ALIGN.NAME' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <p class="text-left">{{'DEMO.TYPOGRAPHY.ALIGN.LEFT' | translate}}</p>
            <p class="text-center">{{'DEMO.TYPOGRAPHY.ALIGN.CENTER' | translate}}</p>
            <p class="text-right">{{'DEMO.TYPOGRAPHY.ALIGN.RIGHT' | translate}}</p>
            <p class="text-justify">{{'DEMO.TYPOGRAPHY.ALIGN.JUSTIFY' | translate}}</p>
            <p class="text-nowrap">{{'DEMO.TYPOGRAPHY.ALIGN.NOWRAP' | translate}}</p>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;p class="text-left"&gt;{{'DEMO.TYPOGRAPHY.ALIGN.LEFT' | translate}}&lt;/p&gt;
              &lt;p class="text-center"&gt;{{'DEMO.TYPOGRAPHY.ALIGN.CENTER' | translate}}&lt;/p&gt;
              &lt;p class="text-right"&gt;{{'DEMO.TYPOGRAPHY.ALIGN.RIGHT' | translate}}&lt;/p&gt;
              &lt;p class="text-justify"&gt;{{'DEMO.TYPOGRAPHY.ALIGN.JUSTIFY' | translate}}&lt;/p&gt;
              &lt;p class="text-nowrap"&gt;{{'DEMO.TYPOGRAPHY.ALIGN.NOWRAP' | translate}}&lt;/p&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.LOWER' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;p class="text-lowercase"&gt;Lowercased text.&lt;/p&gt;
              &lt;p class="text-uppercase"&gt;Uppercased text.&lt;/p&gt;
              &lt;p class="text-capitalize"&gt;Capitalized text.&lt;/p&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.ABBR' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <abbr title="attribute">attr</abbr>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">{{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div class="blockquote-box">
              <blockquote>{{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}</blockquote>
              <blockquote>
                {{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}
                <footer>--TG</footer>
              </blockquote>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;blockquote&gt;{{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}&lt;/blockquote&gt;
              &lt;blockquote&gt;
                {{'DEMO.TYPOGRAPHY.BLOCKQUOTE' | translate}}
                &lt;footer&gt;--TG&lt;/footer&gt;
              &lt;/blockquote&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
